<template>

  <div>
    <div style="padding: 20px">
      选择命名空间:
      <el-select v-model="namespace" placeholder="选择命名空间" @change="changeNs">
        <el-option
          v-for="ns in nslist "
          :label="ns.Name"
          :value="ns.Name"
        />
      </el-select>

    </div>

    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="名称" width="300">
          <template slot-scope="scope">
            {{ scope.row.Name }}
          </template>
        </el-table-column>
        <el-table-column label="命名空间" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.NameSpace }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.CreateTime }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div></template>

<script>
import { getList } from '@/api/svc'
import { NewClient } from '@/utils/ws'

import { getList as getNsList } from '@/api/ns'
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      wsClient: null,
      nslist: [], // ns列表
      namespace: 'default'
    }
  },
  created() {
    getNsList().then(rsp => {
      this.nslist = rsp.data
    })

    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.namespace).then(rsp => {
        this.list = rsp.data
        this.listLoading = false
      })
      this.wsClient = NewClient()
      this.wsClient.onmessage = (e) => {
        if (e.data !== 'ping') {
          if (e.data !== 'ping') {
            const object = JSON.parse(e.data)
            if (object.type === 'service') {
              this.list = object.result.data.data
            }
          }
          this.$forceUpdate()
        }
      }
    },

    changeNs(ns) {
      getList(ns).then(rsp => {
        this.list = rsp.data
      })
    },
    getStatus(row) {
      if (row.IsComplete) {
        return '<span class =\'green\'>Active</span>'
      }
      return '<span class =\'red\'>Waiting</span>'
    },
    getMessage(row) {
      if (!row.IsComplete) {
        return row.Message
      }
      return ''
    }
  }
}
</script>

<style>
.red {
  color: #d20000
}

.green {
  color: green
}
</style>
